<template>
  <div class="page-card">
    <plate-card :icon="TitleIcon" title="农资农药">
      <div class="mt-[12px]">
        <div>当年<span class="font-bold">化肥用量</span>的统计曲线</div>
        <div class="mt-2 py-2 h-[90px] echart-bg">
          <v-charts :autoresize="true" :option="chemicalChartOption" style="height: 100%" />
        </div>
      </div>
      <div class="mt-[12px]">
        <div>当年<span class="font-bold">农药用量</span>的统计曲线</div>
        <div class="mt-2 py-1 h-[90px] echart-bg">
          <v-charts :autoresize="true" :option="pesticideChartOption" style="height: 100%" />
        </div>
      </div>
    </plate-card>
  </div>
</template>

<script lang="ts" setup>
  import PlateCard from '@/components/plate-card.vue'
  import { ref } from 'vue'
  import TitleIcon from '@/assets/images/card-title/pesticide.png'
  import { graphic } from 'echarts'
  import vCharts from 'vue-echarts'

  const getChartOption = data => ({
    grid: {
      top: '10%',
      left: '3%',
      right: '2%',
      bottom: '1%',
      containLabel: true
    },
    tooltip: {},
    xAxis: {
      title: '月份',
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十一月', '十二月'],
      axisTick: {
        show: true,
        inside: true
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
          fontSize: 10
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#0079A4'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '数量',
      nameTextStyle: {
        color: '#fff',
        fontSize: 10
      },
      axisTick: {
        show: true,
        inside: true
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#0079A4'
        }
      },
      axisLabel: {
        color: '#fff',
        fontSize: 10,
        margin: 5
      },
      splitLine: {
        show: false // 隐藏 x 轴线
      },
      interval: 0.25
    },
    series: [
      {
        name: '数量',
        type: 'line',
        data: data,
        label: {
          show: true,
          position: 'top',
          color: '#45549F',
          fontSize: 8,
          distance: -10,
          width: 16,
          height: 16,
          lineHeight: 16,
          backgroundColor: '#fff',
          borderRadius: 100
        },
        smooth: true,
        barWidth: 20,
        itemStyle: {
          height: 16,
          color: '#00d9ff'
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(0, 101, 147)'
            },
            {
              offset: 1,
              color: 'rgba(0, 30, 78,0.3)'
            }
          ])
        }
      }
    ]
  })

  const chemicalChartOption = ref(getChartOption([0.0, 0.1, 0.6, 0.75, 0.56, 0.51, 0.5, 0.55, 0.2, 0.1, 0.1, 0.0]))

  const pesticideChartOption = ref(getChartOption([0.1, 0, 0.6, 0.75, 0.56, 0.51, 0.5, 0.55, 0.1, 0.0, 0.1, 0.0]))
</script>

<style lang="scss" scoped>
  .page-card {
    font-size: 12px;
  }
  .header {
    margin-top: 10px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #001e6b;
  }
  .echart-bg {
    background: rgba(0, 24, 71, 0.2);
  }
</style>
